<template>
  <view class="comment-list">
    <view class="comment-item" v-for="item in commentList"  :key="item.id">
      <view class="avatar">
        <image
          :src="item.avatar"
          mode=""
        ></image>
      </view>
      <view class="comment-center">
        <view class="nickname">
          <text>{{ item.nickname }}</text>
          <view class="like" @click="handleclick(item.id)">
            <text
              class="like-num"
              :style="{ color: item.is_click === 1 ? '#ffc900' : '' }"
              >{{ item.click_num }}</text
            >
            <image
              src="../../static/images/like.png"
              mode=""
              class="like-img"
              v-if="item.is_click === 1"
            >
            </image>
            <image
              src="../../static/images/dislike.png"
              mode=""
              class="like-img"
              v-if="item.is_click === 0"
            >
            </image>
			
          </view>
        </view>
        <view class="comment-content">
          {{ item.com_content }}
        </view>
        <view class="comment-bottom">
          <view
            class="reply"
            @click="
              $Router.push({
                path: '/pages/hospital/article-comment',
                query: { id: id, comId: item.id },
              })
            "
          >
            回复 >
          </view>
          <view class="ago">
            {{ item.tiemDesc }}
          </view>
          <view
            class="ago"
            v-if="userInfo.id === item.uid"
            style="margin-left: 20px"
            @click="handleDelete(item.id)"
          >
            删除
          </view>
        </view>

        <view class="comment-item" v-for="son in item.com_sons" :key="son.id">
          <view class="avatar">
            <image
              :src="son.avatar"
              mode=""
            ></image>
          </view>
          <view class="comment-center">
            <view class="nickname">
              <text>{{ son.nickname }}</text>
              <view class="like" @click="handleclick(son.id)">
                <text class="like-num">{{ son.click_num }}</text>

                <image
                  src="../../static/images/like.png"
                  mode=""
                  class="like-img"
                  v-if="son.is_click === 1"
                ></image>
                <image
                  src="../../static/images/dislike.png"
                  mode=""
                  class="like-img"
                  v-if="son.is_click === 0"
                ></image>
              </view>
            </view>
            <view class="comment-content">
              {{ son.com_content }}
            </view>
            <view class="comment-bottom">
              <!-- 	<view class="reply" >
								回复 >
							</view> -->
              <view class="ago">
                {{ son.tiemDesc }}
              </view>
              <view
                class="ago"
                v-if="userInfo.id === son.uid"
                style="margin-left: 20px"
                @click="handleDelete(item.id)"
              >
                删除
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="comment-item">
					<view class="avatar">
						<image src="../../static/images/head.png" mode=""></image>
					</view>
					<view class="comment-center">
						<view class="nickname">
							<text>每一天都要开心666</text>
							<view class="like">
								<text class="like-num">1162</text>
								<image src="../../static/images/like.png" mode="" class="like-img"></image>
							</view>
						</view>
						<view class="comment-content">
							积极发挥正面作用，积极发挥正面作用，及
							积极发挥正面作用。
						</view>
						<view class="comment-bottom">
							<view class="reply">
								回复 >
							</view>
							<view class="ago">
								11小时前
							</view>
						</view>
					</view>
				</view> -->
      </view>
    </view>

    <!-- <view class="comment-item">
			<view class="avatar">
				<image src="../../static/images/head.png" mode=""></image>
			</view>
			<view class="comment-center">
				<view class="nickname">
					<text>每一天都要开心666</text>
					<view class="like">
						<text class="like-num">1162</text>
						<image src="../../static/images/like.png" mode="" class="like-img"></image>
					</view>
				</view>
				<view class="comment-content">
					积极发挥正面作用，积极发挥正面作用，及
					积极发挥正面作用。
				</view>
				<view class="comment-bottom">
					<view class="reply">
						回复 >
					</view>
					<view class="ago">
						11小时前
					</view>
				</view>
			</view>
		</view>
		
		<view class="comment-item">
			<view class="avatar">
				<image src="../../static/images/head.png" mode=""></image>
			</view>
			<view class="comment-center">
				<view class="nickname">
					<text>每一天都要开心666</text>
					<view class="like">
						<text class="like-num">1162</text>
						<image src="../../static/images/like.png" mode="" class="like-img"></image>
					</view>
				</view>
				<view class="comment-content">
					积极发挥正面作用，积极发挥正面作用，及
					积极发挥正面作用。
				</view>
				<view class="comment-bottom">
					<view class="reply">
						回复 >
					</view>
					<view class="ago">
						11小时前
					</view>
				</view>
			</view>
		</view> -->
    <shopro-auth-modal></shopro-auth-modal>
  </view>
</template>

<script>
import Time from "./utils.js";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      commentList: [],
      id: "",
      isOver: false,
      pageindex: 0,
    };
  },
  onLoad() {
    // this.handleGetCommentList()
    // this.id=this.$Route.query.id
  },
  onShow() {
    this.handleGetCommentList();
    this.id = this.$Route.query.id;
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  onReachBottom() {
    //判断下一页是否存在数据，不存在将显示暂无数据等提示语
    if (this.commentList.length < this.pageindex * 10) {
      this.isOver = true;
    }
    this.pageindex++; //页数加一
    this.handleGetCommentList();
  },
  methods: {
    handleGetCommentList() {
      let that = this;
      if (that.isOver) {
        return;
      }
      that
        .$https("doctindex.commentList", {
          id: that.$Route.query.id,
          page: that.pageindex,
        },'','',{'content-type':'application/x-www-form-urlencoded'})
        .then((res) => {
          console.log("---", res);
          if (res.code === 1) {
            that.commentList = res.data || [];
            that.commentList.forEach((item) => {
              (item.avatar = item.avatar || "../../static/images/head.png"),
                (item.tiemDesc = Time.getFormatTime(item.addtime * 1000));
              item.com_sons.forEach((son) => {
                son.tiemDesc = Time.getFormatTime(son.addtime * 1000);
              });
            });
            console.log(that.commentList, "--");
          }
        });
    },
    handleDelete(id) {
      let that = this;
      that
        .$https("doctindex.deleteCommon", {
          com_id: id,
        })
        .then((res) => {
          if (res.code === 1) {
            uni.showToast({
              title: "删除成功",
              duration: 2000,
              icon: "none",
              position: "bottom",
            });
            that.handleGetCommentList();
          }
        });
    },
    handleclick(id) {
      let that = this;
      that
        .$https("doctindex.articleCommentClick", {
          com_id: id,
        })
        .then((res) => {
          if (res.code === 1) {
            uni.showToast({
              title: res.data ? "取消点赞成功" : "点赞成功",
              duration: 2000,
              icon: "none",
              position: "bottom",
            });
            that.handleGetCommentList();
          }
        });
    },
  },
};
</script>

<style lang="scss">
.comment-list {
  background: #ffffff;
  padding: 0 30rpx 30rpx;

  .comment-item {
    display: flex;
    padding: 30rpx 0;
    border-bottom: 2rpx solid #f5f5f5;
    .avatar {
      width: 62rpx;
      height: 62rpx;
      border-radius: 50%;

      image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .comment-center {
      flex: 1;
      margin-left: 20rpx;
	  
	.comment-item:last-child{
		 border-bottom: 0;
	}
      .nickname {
        color: #000000;
        font-size: 26rpx;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .like {
          display: flex;
          align-items: center;

          .like-num {
            // color: rgba(255, 201, 0, 1);
            font-size: 26rpx;
            margin: 10rpx;
          }

          .like-img {
            width: 26rpx;
            height: 26rpx;
          }
        }
      }

      .comment-content {
        margin-top: 20rpx;
        font-size: 30rpx;
        font-weight: 400;
        line-height: 45rpx;
        color: #000000;
      }

      .comment-bottom {
        margin-top: 20rpx;
        display: flex;
        align-items: center;

        .reply {
          background: rgba(238, 238, 238, 1);
          width: 110rpx;
          height: 48rpx;
          color: #777777;
          font-size: 24rpx;
          text-align: center;
          line-height: 48rpx;
        }

        .ago {
          margin-left: 20rpx;
          color: #777777;
          font-size: 22rpx;
        }
      }
    }
  }
}
</style>
